<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>两列布局</title>
    <style>
        *{padding:0;margin:0;font:bold 18px "微软雅黑";}
        #box{
            width:500px;
            border:1px solid black;
            margin:10px auto;
            overflow:hidden;
        }
        #box .wrap{
            width:100%;
            float:left;
        }
        #box .wrap .content{
            height:200px;
            background:pink;
            margin-right:100px;
        }
        #box .right{
            width:100px;
            height:200px;
            background:lightgreen;
            float:left;
            margin-left:-100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="wrap">
            <div class="content">
                1左列内容 2左列内容 3左列内容 4左列内容 5左列内容 6左列内容 7左列内容 8左列内容 9左列内容
            </div>
        </div>
        <div class="right">右列内容</div>
    </div>
</body>
</html>